<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统架构设计 - 异烟酸生产收率预测系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="styles/common.css">
    <link rel="stylesheet" href="styles/components.css">
    <link rel="stylesheet" href="styles/main-nav.css">
</head>
<body>
    <div class="app-container">
        <!-- 侧边栏 -->
        <div class="sidebar">
            <div class="logo">
                <img src="img/python-logo.png" alt="Python工业预测模型Logo">
                <span>异烟酸生产收率预测</span>
            </div>
            <nav class="nav-menu">
                <a href="index.html" class="nav-item">
                    <i class="fas fa-home"></i>
                    <span>首页</span>
                </a>
                <a href="qd-display.html" class="nav-item">
                    <i class="fas fa-tachometer-alt"></i>
                    <span>主控面板</span>
                </a>
                <a href="model-value.html" class="nav-item">
                    <i class="fas fa-chart-line"></i>
                    <span>模型应用价值</span>
                </a>
                <a href="system-architecture.html" class="nav-item active">
                    <i class="fas fa-project-diagram"></i>
                    <span>系统架构设计</span>
                </a>
                <a href="data-flow.html" class="nav-item">
                    <i class="fas fa-database"></i>
                    <span>数据流设计</span>
                </a>
                <a href="model-deployment.html" class="nav-item">
                    <i class="fas fa-cogs"></i>
                    <span>模型部署与应用</span>
                </a>
                <a href="ui-design.html" class="nav-item">
                    <i class="fas fa-desktop"></i>
                    <span>用户界面设计</span>
                </a>
                <a href="yield-prediction.html" class="nav-item">
                    <i class="fas fa-flask"></i>
                    <span>收率预测</span>
                </a>
                <a href="parameter-monitoring.html" class="nav-item">
                    <i class="fas fa-eye"></i>
                    <span>关键参数监控</span>
                </a>
                <a href="online-analysis.html" class="nav-item">
                    <i class="fas fa-chart-bar"></i>
                    <span>在线分析</span>
                </a>
                <a href="model-performance.html" class="nav-item">
                    <i class="fas fa-chart-pie"></i>
                    <span>模型性能</span>
                </a>
                <a href="model-details.html" class="nav-item">
                    <i class="fas fa-info-circle"></i>
                    <span>模型详情</span>
                </a>
                <a href="model-update.html" class="nav-item">
                    <i class="fas fa-sync-alt"></i>
                    <span>模型更新</span>
                </a>
                <a href="model-config.html" class="nav-item">
                    <i class="fas fa-sliders-h"></i>
                    <span>系统配置</span>
                </a>
                <a href="documentation.html" class="nav-item">
                    <i class="fas fa-book"></i>
                    <span>技术文档</span>
                </a>
            </nav>
            <div class="sidebar-footer">
                <div class="user-info">
                    <img src="https://cdn-icons-png.flaticon.com/512/1077/1077114.png" alt="User">
                    <span>管理员</span>
                </div>
                <a href="#" class="logout-btn">
                    <i class="fas fa-sign-out-alt"></i>
                </a>
            </div>
        </div>

        <!-- 主内容区 -->
        <div class="main-content">
            <!-- 顶部导航栏 -->
            <header class="top-bar">
                <div class="page-title">
                    <h1>系统架构设计</h1>
                    <p>异烟酸生产收率预测系统的整体架构与技术方案</p>
                </div>
                <div class="top-bar-actions">
                    <div class="search-bar">
                        <i class="fas fa-search"></i>
                        <input type="text" placeholder="搜索...">
                    </div>
                    <div class="notification">
                        <i class="far fa-bell"></i>
                        <span class="badge">3</span>
                    </div>
                    <div class="setting">
                        <i class="fas fa-cog"></i>
                    </div>
                </div>
            </header>

            <!-- 内容区域 -->
            <div class="content-wrapper">
                <!-- 顶部导航链接 -->
                <div class="navigation-links">
                    <a href="model-value.html" class="nav-link">1. 模型应用价值与落地路径</a>
                    <a href="system-architecture.html" class="nav-link active">2. 系统架构设计</a>
                    <a href="data-flow.html" class="nav-link">3. 数据流设计</a>
                    <a href="model-deployment.html" class="nav-link">4. 模型部署与应用</a>
                    <a href="ui-design.html" class="nav-link">5. 用户界面设计</a>
                    <a href="yield-prediction.html" class="nav-link">收率预测</a>
                    <a href="parameter-monitoring.html" class="nav-link">关键参数监控</a>
                </div>

                <div class="secondary-nav">
                    <a href="system-implementation.html" class="nav-link">6. 系统集成方案</a>
                </div>

                <!-- 页面内容 -->
                <div class="page-content">
                    <!-- 架构概述 -->
                    <div class="section-title">系统架构概述</div>
                    
                    <div class="content-card">
                        <div class="content-card-title">
                            <i class="fas fa-sitemap"></i>
                            整体架构
                        </div>
                        <p>异烟酸生产收率预测系统采用分层设计，遵循微服务架构原则，保证系统的可扩展性、可维护性和高可用性。系统主要分为数据层、模型层、服务层和应用层四个部分。</p>
                        
                        <div class="architecture-diagram">
                            <img src="https://via.placeholder.com/800x400?text=异烟酸生产收率预测系统架构图" alt="系统架构图" style="width: 100%; max-width: 800px; margin: 20px auto; display: block;">
                        </div>
                    </div>
                    
                    <!-- 架构分层 -->
                    <div class="section-title">架构分层</div>
                    
                    <div class="info-grid">
                        <div class="info-card">
                            <div class="info-card-icon">
                                <i class="fas fa-database"></i>
                            </div>
                            <div class="info-card-title">数据层</div>
                            <div class="info-card-text">
                                <ul style="padding-left: 20px; margin-top: 10px;">
                                    <li>生产数据采集与预处理</li>
                                    <li>历史数据存储与管理</li>
                                    <li>数据质量监控</li>
                                    <li>ETL流程</li>
                                    <li>特征工程</li>
                                </ul>
                            </div>
                        </div>
                        
                        <div class="info-card">
                            <div class="info-card-icon">
                                <i class="fas fa-brain"></i>
                            </div>
                            <div class="info-card-title">模型层</div>
                            <div class="info-card-text">
                                <ul style="padding-left: 20px; margin-top: 10px;">
                                    <li>收率预测模型</li>
                                    <li>参数优化模型</li>
                                    <li>异常检测模型</li>
                                    <li>模型训练与更新</li>
                                    <li>模型版本管理</li>
                                </ul>
                            </div>
                        </div>
                        
                        <div class="info-card">
                            <div class="info-card-icon">
                                <i class="fas fa-cogs"></i>
                            </div>
                            <div class="info-card-title">服务层</div>
                            <div class="info-card-text">
                                <ul style="padding-left: 20px; margin-top: 10px;">
                                    <li>API网关</li>
                                    <li>预测服务</li>
                                    <li>优化建议服务</li>
                                    <li>监控告警服务</li>
                                    <li>权限与身份认证</li>
                                </ul>
                            </div>
                        </div>
                        
                        <div class="info-card">
                            <div class="info-card-icon">
                                <i class="fas fa-desktop"></i>
                            </div>
                            <div class="info-card-title">应用层</div>
                            <div class="info-card-text">
                                <ul style="padding-left: 20px; margin-top: 10px;">
                                    <li>Web用户界面</li>
                                    <li>移动端应用</li>
                                    <li>报表与数据可视化</li>
                                    <li>用户交互</li>
                                    <li>系统配置</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 技术栈 -->
                    <div class="section-title">技术栈</div>
                    
                    <div class="tech-stack">
                        <table class="performance-table">
                            <thead>
                                <tr>
                                    <th>架构层</th>
                                    <th>核心技术</th>
                                    <th>说明</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td rowspan="3">数据层</td>
                                    <td>MySQL / PostgreSQL</td>
                                    <td>关系型数据库，存储结构化业务数据和生产参数</td>
                                </tr>
                                <tr>
                                    <td>Hadoop / HDFS</td>
                                    <td>分布式存储，用于大规模历史数据的存储与管理</td>
                                </tr>
                                <tr>
                                    <td>Apache Kafka</td>
                                    <td>消息队列，用于实时数据流的采集与传输</td>
                                </tr>
                                
                                <tr>
                                    <td rowspan="3">模型层</td>
                                    <td>Python / TensorFlow / PyTorch</td>
                                    <td>核心算法开发与模型训练</td>
                                </tr>
                                <tr>
                                    <td>Scikit-learn / XGBoost</td>
                                    <td>机器学习算法库，用于特征选择和模型构建</td>
                                </tr>
                                <tr>
                                    <td>MLflow</td>
                                    <td>模型版本管理与部署平台</td>
                                </tr>
                                
                                <tr>
                                    <td rowspan="3">服务层</td>
                                    <td>Spring Boot / Django</td>
                                    <td>后端服务框架，提供RESTful API</td>
                                </tr>
                                <tr>
                                    <td>Docker / Kubernetes</td>
                                    <td>容器化部署与服务编排</td>
                                </tr>
                                <tr>
                                    <td>NGINX</td>
                                    <td>Web服务器与负载均衡</td>
                                </tr>
                                
                                <tr>
                                    <td rowspan="3">应用层</td>
                                    <td>Vue.js / React</td>
                                    <td>前端框架，构建交互式用户界面</td>
                                </tr>
                                <tr>
                                    <td>ECharts / D3.js</td>
                                    <td>数据可视化库</td>
                                </tr>
                                <tr>
                                    <td>Element UI / Ant Design</td>
                                    <td>UI组件库</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- 系统组件 -->
                    <div class="section-title">关键系统组件</div>
                    
                    <div class="value-cards">
                        <div class="value-card">
                            <div class="value-icon">
                                <i class="fas fa-exchange-alt"></i>
                            </div>
                            <div class="value-content">
                                <div class="value-title">数据集成模块</div>
                                <div class="value-desc">负责从多个数据源采集、清洗、转换和加载数据，保证数据的质量和一致性。</div>
                            </div>
                        </div>
                        
                        <div class="value-card">
                            <div class="value-icon">
                                <i class="fas fa-calculator"></i>
                            </div>
                            <div class="value-content">
                                <div class="value-title">预测引擎</div>
                                <div class="value-desc">基于多种机器学习算法的预测引擎，提供异烟酸生产收率的实时预测。</div>
                            </div>
                        </div>
                        
                        <div class="value-card">
                            <div class="value-icon">
                                <i class="fas fa-sliders-h"></i>
                            </div>
                            <div class="value-content">
                                <div class="value-title">参数优化模块</div>
                                <div class="value-desc">基于历史数据和当前工况，推荐最优生产参数组合，以提高收率。</div>
                            </div>
                        </div>
                        
                        <div class="value-card">
                            <div class="value-icon">
                                <i class="fas fa-bell"></i>
                            </div>
                            <div class="value-content">
                                <div class="value-title">监控告警系统</div>
                                <div class="value-desc">实时监测关键参数，当发现异常或预测收率下降时及时触发告警。</div>
                            </div>
                        </div>
                        
                        <div class="value-card">
                            <div class="value-icon">
                                <i class="fas fa-chart-bar"></i>
                            </div>
                            <div class="value-content">
                                <div class="value-title">报表分析系统</div>
                                <div class="value-desc">提供多维度的报表和数据分析功能，支持历史趋势分析和改进建议。</div>
                            </div>
                        </div>
                        
                        <div class="value-card">
                            <div class="value-icon">
                                <i class="fas fa-user-shield"></i>
                            </div>
                            <div class="value-content">
                                <div class="value-title">权限管理系统</div>
                                <div class="value-desc">基于角色的访问控制，确保不同用户拥有适当的操作权限。</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 系统安全 -->
                    <div class="section-title">系统安全与可靠性</div>
                    
                    <div class="content-card">
                        <div class="content-card-title">
                            <i class="fas fa-shield-alt"></i>
                            安全措施
                        </div>
                        <ul style="padding-left: 20px; margin-top: 10px;">
                            <li><strong>数据加密：</strong>敏感数据传输和存储采用加密保护</li>
                            <li><strong>身份认证：</strong>多因素认证，确保用户身份安全</li>
                            <li><strong>权限控制：</strong>基于角色的精细化权限管理</li>
                            <li><strong>安全审计：</strong>全面记录系统操作日志，支持安全审计</li>
                            <li><strong>网络隔离：</strong>采用网络区域隔离，保护生产网络安全</li>
                        </ul>
                    </div>
                    
                    <div class="content-card">
                        <div class="content-card-title">
                            <i class="fas fa-heartbeat"></i>
                            高可用性设计
                        </div>
                        <ul style="padding-left: 20px; margin-top: 10px;">
                            <li><strong>服务冗余：</strong>关键服务组件多实例部署</li>
                            <li><strong>负载均衡：</strong>NGINX负载均衡，优化请求分发</li>
                            <li><strong>自动伸缩：</strong>根据负载自动扩展服务实例</li>
                            <li><strong>故障转移：</strong>主备架构，支持快速故障切换</li>
                            <li><strong>数据备份：</strong>定期数据备份和灾难恢复方案</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- JavaScript引用 -->
    <script src="scripts/common.js"></script>
    <script src="scripts/main-nav.js"></script>
</body>
</html> 